/** @jsx jsx */
import { jsx } from '@emotion/react'
import React, {
    useMemo,
    useEffect,
    useState,
    useRef,
    useCallback
} from 'react'
import {
    LgColorCard,
    LgSelect,
    LgSearch,
    LgTable,
    LgSwitch,
    LgEmpty
} from "lancoo-web-ui";
import BtnAlert from "../../common/component/btnAlert";
import { message, Spin } from 'antd';
import { connect } from 'react-redux'
import axiosMethod from '../../util/axios';
import Header from '../header';
import { Select } from 'element-react'
import styles from './index.module.scss'
import Scrollbars from 'react-custom-scrollbars';
import styled from '@emotion/styled'
import TaskProcess from '../taskProcess'
// import flowChartImg from '@/pages/component/taskProcess/images/flowChartImg.png'
import './index.scss'

const flowChartImg = require('./images/flowChartImg.png')
const cardBg = require('./images/cardBg.png')
const requireContext = require.context("../../images/icon", true, /^\.\/.*\.svg$/)
const svgs = requireContext.keys().map(requireContext);
const keys = requireContext.keys()
let fileObj = {}

keys.map((item, index) => {
    let str = item.replace('./', "").replace('.svg', "")
    fileObj[str] = svgs[index]['default']
})

message.config({
    duration: 2,
    maxCount: 1,
    rtl: true,
});

function Index(props) {


    let {
        userInfo,
        sysAddrInfo,
        currentIdentity,
        sysInfo,
        kindList,
        alertInfo,
        mainServer,
        isEdu
    } = props;

    const [cardArr, setCardArr] = useState([
        { key: 'appletsPush', name: '公众号消息推送', count: 0, color: '#5c74f5', bgColor: '#e8eefe', icon: '01' },
        { key: 'sysPush', name: '系统提醒推送', count: 0, color: '#ff9a34', bgColor: '#fff5e8', icon: '02' },
        { key: 'todoPush', name: '待办事项推送', count: 0, color: '#08c288', bgColor: '#e7fbf5', icon: '03' },
        { key: 'appPush', name: 'App消息推送', count: 0, color: '#00b0ff', bgColor: '#dff5ff', icon: '04' },
        { key: 'mailPush', name: '邮件推送', count: 0, color: '#7a60e6', bgColor: '#e4deff', icon: '05', title: '仅汇总，不在此处控制' },
        { key: 'smsPush', name: '手机短信推送', count: 0, color: '#fb657d', bgColor: '#ffeced', icon: '06', title: '仅汇总，不在此处控制' },
        { key: 'dingPush', name: '钉钉消息', count: 0, color: '#fb657d', bgColor: '#ffeced', icon: '07' },
    ]) //卡片属性
    const [appList, setAppList] = useState([
    ]) //应用列表
    const [msgType, setMsgType] = useState([
        { id: -1, key: 'all', text: '全部消息', lable: '全部消息' },
        { id: 1, key: 'appletsPush', text: '公众号消息', lable: '公众号消息' },
        { id: 2, key: 'sysPush', text: '系统提醒', lable: '系统提醒' },
        { id: 3, key: 'todoPush', text: '待办事项', lable: '待办事项' },
        { id: 4, key: 'appPush', text: 'App消息', lable: 'App消息' },
        { id: 5, key: 'mailPush', text: '邮件', lable: '邮件' },
        { id: 6, key: 'smsPush', text: '手机短信', lable: '手机短信' },
        { id: 7, key: 'dingPush', text: '钉钉消息', lable: '钉钉消息' },
    ]) //消息类型
    const [currentApp, setCurrentApp] = useState({ text: '全部应用', id: -1 })
    const [currentType, setCurrentType] = useState({ text: '全部消息', id: -1, lable: '全部消息' })
    const [dataList, setDataList] = useState([
    ])
    const [keyword, setKeyword] = useState('')
    const [loadVisible, setLoadVisible] = useState(true)
    const [loadVisible2, setLoadVisible2] = useState(false)
    const [access, setAccess] = useState(true)
    const [dingVisible, setDingVisible] = useState(false)

    const isDingVisible = useCallback(() => {
        axiosMethod({
            type: 'get',
            url: '/api/commons/system/info',
            body: {

            },
            callback: function (data) {
                console.log(data)
                setDingVisible(data.beDingTalk == 1 ? true : false)
                // if (data.beDingTalk == 1) {
                //     setCardArr(
                //         [
                //             { key: 'appletsPush', name: '公众号消息推送', count: 0, color: '#5c74f5', bgColor: '#e8eefe', icon: '01' },
                //             { key: 'sysPush', name: '系统提醒推送', count: 0, color: '#ff9a34', bgColor: '#fff5e8', icon: '02' },
                //             { key: 'todoPush', name: '待办事项推送', count: 0, color: '#08c288', bgColor: '#e7fbf5', icon: '03' },
                //             { key: 'appPush', name: 'App消息推送', count: 0, color: '#00b0ff', bgColor: '#dff5ff', icon: '04' },
                //             { key: 'mailPush', name: '邮件推送', count: 0, color: '#7a60e6', bgColor: '#e4deff', icon: '05', title: '仅汇总，不在此处控制' },
                //             { key: 'smsPush', name: '手机短信推送', count: 0, color: '#fb657d', bgColor: '#ffeced', icon: '06', title: '仅汇总，不在此处控制' },
                //             { key: 'dingPush', name: '钉钉消息', count: 0, color: '#fb657d', bgColor: '#ffeced', icon: '07' },
                //         ]
                //     )
                // } else {
                //     setCardArr(
                //         [
                //             { key: 'appletsPush', name: '公众号消息推送', count: 0, color: '#5c74f5', bgColor: '#e8eefe', icon: '01' },
                //             { key: 'sysPush', name: '系统提醒推送', count: 0, color: '#ff9a34', bgColor: '#fff5e8', icon: '02' },
                //             { key: 'todoPush', name: '待办事项推送', count: 0, color: '#08c288', bgColor: '#e7fbf5', icon: '03' },
                //             { key: 'appPush', name: 'App消息推送', count: 0, color: '#00b0ff', bgColor: '#dff5ff', icon: '04' },
                //             { key: 'mailPush', name: '邮件推送', count: 0, color: '#7a60e6', bgColor: '#e4deff', icon: '05', title: '仅汇总，不在此处控制' },
                //             { key: 'smsPush', name: '手机短信推送', count: 0, color: '#fb657d', bgColor: '#ffeced', icon: '06', title: '仅汇总，不在此处控制' },
                //         ]
                //     )
                // }
            }
        })
    }, [dataList])
    useEffect(() => {
        isDingVisible()
    }, [])
    const columns = useMemo(() => {
        return [
            {
                dataIndex: "serial",
                key: "serial",
                align: "center",
                width: 50,
                render: (value, record, index) => {
                    return <span className={styles["serial"]}>{index + 1}</span>;
                },
            },
            {
                title: "应用名称",
                dataIndex: "appName",
                key: "sysId",
                width: 170,
                align: "center",
                render: (value, record) => {
                    return (
                        <div className={styles["project-name"]}>
                            <span>{record.sysName}</span>
                            <LgSwitch size='small' checked={record.globalPush == 1} onClick={(e) => { changeCheckedValue(e, 'group', record) }} />
                        </div>)
                },
                onCell: (record, index) => {
                    const props = {
                        rowSpan: 0,
                    };
                    // if (index === 0) {
                    //   props.rowSpan = 2;
                    // } else if (index === 2) {
                    //   props.rowSpan = 3;
                    // }
                    props.rowSpan = record.sysNameRowSpan
                    return props;
                },
            },
            {
                title: "场景",
                dataIndex: "scene",
                key: "sceneId",
                width: 90,
                align: "start",
                render: (value, record) => {
                    return <span className={styles["project-scene"]}>{record.sceneName || '--'}</span>;
                },
                onCell: (record, index) => {
                    const props = {
                        rowSpan: 0,
                    };
                    // if (index === 0) {
                    //   props.rowSpan = 2;
                    // } else if (index === 2) {
                    //   props.rowSpan = 3;
                    // }
                    props.rowSpan = record.sceneNameRowSpan
                    return props;
                },
            },
            {
                title: "事件",
                dataIndex: "event",
                key: "enentId",
                width: 180,
                align: "start",
                render: (value, record) => {
                    return <span className={styles["project-event"]}>{record.eventContent || '--'}</span>;
                },
            },
            {
                title: "通知对象",
                dataIndex: "person",
                key: "person",
                width: 180,
                align: "start",
                render: (value, record) => {
                    return <span className={styles["project-person"]}>{record.noticeTarget || '--'}</span>;
                },
            },
            {
                title: "推送方式",
                dataIndex: "pushWay",
                key: "pushWay",
                align: "center",
                width: 474,
                children: [
                    {
                        title: "公众号消息",
                        dataIndex: "weapp",
                        key: "weapp",
                        align: "center",
                        width: 80,
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]}>
                                    {
                                        record.appletsPush == -1 || !record.appletsPush ? '--' :
                                            <LgSwitch size='small' checked={record.appletsPush == 1} onClick={(e) => changeCheckedValue(e, 'appletsPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "系统提醒",
                        dataIndex: "system",
                        key: "system",
                        align: "center",
                        width: 80,
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]}>
                                    {
                                        record.sysPush == -1 || !record.sysPush ? '--' :
                                            <LgSwitch size='small' checked={record.sysPush == 1} onClick={(e) => changeCheckedValue(e, 'sysPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "待办事项",
                        dataIndex: "todo",
                        key: "todo",
                        align: "center",
                        width: 80,
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]}>
                                    {
                                        record.todoPush == -1 || !record.todoPush ? '--' :
                                            <LgSwitch size='small' checked={record.todoPush == 1} onClick={(e) => changeCheckedValue(e, 'todoPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "App消息",
                        dataIndex: "app",
                        key: "app",
                        align: "center",
                        width: 80,
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]}>
                                    {
                                        record.appPush == -1 || !record.appPush ? '--' :
                                            <LgSwitch size='small' checked={record.appPush == 1} onClick={(e) => changeCheckedValue(e, 'appPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "邮件",
                        dataIndex: "email",
                        key: "email",
                        align: "center",
                        width: 80,
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]} title="仅汇总，不在此处控制">
                                    {
                                        record.mailPush == -1 || !record.mailPush ? '--' :
                                            <LgSwitch size='small' disabled checked={record.mailPush == 1} onClick={(e) => changeCheckedValue(e, 'mailPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "手机短信",
                        dataIndex: "phone",
                        key: "phone",
                        align: "center",
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]} title="仅汇总，不在此处控制">
                                    {
                                        record.smsPush == -1 || !record.smsPush ? '--' :
                                            <LgSwitch disabled size='small' checked={record.smsPush == 1} onClick={(e) => changeCheckedValue(e, 'smsPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                    {
                        title: "钉钉消息",
                        dataIndex: "dingding",
                        key: "dingding",
                        align: "center",
                        className: dingVisible ? "" : "dingHidden",
                        render: (value, record) => {
                            return (
                                <div className={styles["way"]}>
                                    {
                                        record.dingPush == -1 || !record.dingPush ? '--' :
                                            <LgSwitch size='small' checked={record.dingPush == 1} onClick={(e) => changeCheckedValue(e, 'dingPush', record)} />
                                    }
                                </div>
                            )
                        },
                    },
                ],
            },
        ];
    }, [changeCheckedValue, dataList])

    const getCommonData = useCallback(async () => {
        let access = await checkPermission()
        setAccess(access)

        if (!access) {
            return
        }
        axiosMethod({  //所有系统
            type: 'get',
            url: `/api/setting/list/sys?schoolId=${userInfo.SchoolID}&beSchoolLevel=${userInfo.SchoolLevel}`,
            callback: function (data) {
                Array.isArray(data) && data.forEach((item) => {
                    item.text = item.sysName
                })
                data.unshift({ text: '全部应用', sysId: '' })
                setAppList(data)
            }
        })
        axiosMethod({  //卡片
            type: 'get',
            url: `/api/setting/statistics?schoolId=${userInfo.SchoolID}&beSchoolLevel=${userInfo.SchoolLevel}`,
            data: {
            },
            callback: function (data) {
                if (typeof data === 'object') {
                    let arr = JSON.parse(JSON.stringify(cardArr))
                    arr.forEach((item) => {
                        if (item.key === 'appletsPush') {
                            item.count = data['appletsPush']
                        } else if (item.key === 'appPush') {
                            item.count = data['appPush']
                        } else if (item.key === 'sysPush') {
                            item.count = data['sysPush']
                        } else if (item.key === 'todoPush') {
                            item.count = data['todoPush']
                        } else if (item.key === 'mailPush') {
                            item.count = data['mailPush']
                        } else if (item.key === 'smsPush') {
                            item.count = data['smsPush']
                        } else if (item.key === 'dingPush') {
                            item.count = data['dingPush']
                        }
                    })
                    setCardArr(arr)
                }
            }
        })
        // let newArr=dealRowSpan(dataList,'rowSpan','sysName')
        // setDataList(newArr)
        setLoadVisible(false)
    }, [userInfo])

    const getList = useCallback((type) => {
        if (type === 'init') {
            setLoadVisible(true)
        }

        axiosMethod({
            type: 'get',
            url: '/api/setting/list//msg/setting',
            body: {
                schoolId: userInfo.SchoolID,
                beSchoolLevel: sysInfo.schoolLevel,
                keyword,
                type: currentType.id,
                sysId: currentApp.sysId
            },
            callback: function (data) {

                data.length > 0 && data.sort(function (a, b) {
                    if (a['sceneId'] != b['sceneId']) {
                        return a['sceneId'].localeCompare(b['sceneId'])
                    }
                });
                setDataList(dealRowSpan(data, ['sysName', 'sceneName']))
                setLoadVisible(false)
                setLoadVisible2(false)
                // if (type === 'click') {
                //     message.success('启用成功')
                // }
            }
        })
    }, [currentApp, currentType, keyword, userInfo])

    const dealRowSpan = (data, nameList) => {
        for (var i = 0; i < nameList.length; i++) {
            var name = nameList[i];
            var startRow = 0;
            var endRow = data.length;
            var mergeNum = 1;
            if (endRow != 1) {
                for (var j = startRow; j < endRow; j++) {
                    if (j == endRow - 1) { //判断是否是最后一个元素
                        if (startRow == endRow - 1) {
                            data[j][name + 'RowSpan'] = 1;
                        }
                    } else {
                        if (data[startRow][name] == data[j + 1][name]) {
                            data[j + 1][name + 'RowSpan'] = 0;
                            mergeNum = mergeNum + 1;
                            data[startRow][name + 'RowSpan'] = mergeNum;
                        } else {
                            startRow = j + 1;
                            if (mergeNum > 1) {
                                data[startRow][name + 'RowSpan'] = 1;
                            } else {
                                data[j][name + 'RowSpan'] = 1;
                            }
                            mergeNum = 1;
                        }
                    }
                }
            } else {
                data[0][name + 'RowSpan'] = 1;
            }
        }
        return data;
    }

    const getSysSettingCount = () => {
        axiosMethod({  //卡片
            type: 'get',
            url: `/api/setting/statistics?schoolId=${userInfo.SchoolID}&beSchoolLevel=${userInfo.SchoolLevel}&sysId=${currentApp.sysId || ''}`,
            data: {
            },
            callback: function (data) {
                if (typeof data === 'object') {
                    let appListHanlde = msgType.concat([])
                    let allCount = 0
                    for (let key in data) {
                        allCount += Number(data[key])
                    }
                    appListHanlde.forEach((child) => {
                        if (child.key === 'appletsPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['appletsPush'])})`}</SelectItem></span>
                        } else if (child.key === 'appPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['appPush'])})`}</SelectItem></span>
                        } else if (child.key === 'sysPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['sysPush'])})`}</SelectItem></span>
                        } else if (child.key === 'todoPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['todoPush'])})`}</SelectItem></span>
                        } else if (child.key === 'mailPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['mailPush'])})`}</SelectItem></span>
                        } else if (child.key === 'smsPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['smsPush'])})`}</SelectItem></span>
                        } else if (child.key === 'dingPush') {
                            child.text = <span>{child.lable}<SelectItem>{`(${Number(data['dingPush'])})`}</SelectItem></span>
                        } else if (child.key === 'all') {
                            child.text = <span>{child.lable}<SelectItem>{`(${allCount})`}</SelectItem></span>
                        }
                    })
                }
            }
        })
    }


    const changeCheckedValue = useCallback((value, type = '', item) => {  //type:group应用  空为单个应用的推送方式
        setLoadVisible2(true)
        let body = {}
        let isOpen = 0
        if (type === 'group') {
            body = {
                schoolId: userInfo.SchoolID,
                sysId: item.sysId,
                globalPush: item.globalPush === '0' ? 1 : 0
            }
        } else {
            switch (type) {
                case 'appPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        appPush: item.appPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.appPush === '0' ? 1 : 0
                    break;
                case 'appletsPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        appletsPush: item.appletsPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.appletsPush === '0' ? 1 : 0
                    break;
                case 'sysPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        sysPush: item.sysPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.sysPush === '0' ? 1 : 0
                    break;
                case 'todoPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        todoPush: item.todoPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.todoPush === '0' ? 1 : 0
                    break;
                case 'mailPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        mailPush: item.mailPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.mailPush === '0' ? 1 : 0
                    break;
                case 'smsPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        smsPush: item.smsPush === '0' ? 1 : 0
                    }
                    isOpen = item.smsPush === '0' ? 1 : 0
                    break;
                case 'dingPush':
                    body = {
                        schoolId: userInfo.SchoolID,
                        eventId: item.eventId,
                        dingPush: item.dingPush === '0' ? 1 : 0,
                        sysId: item.sysId
                    }
                    isOpen = item.dingPush === '0' ? 1 : 0
                    break;
                default:
                    break;
            }

        }
        axiosMethod({
            type: 'post',
            url: '/api/setting/manage/update/status',
            body,
            callback: function (data) {
                getCommonData()
                getList('click')
                if (isOpen == 1) {
                    message.success('启用成功')
                } else {
                    message.success('关闭成功')
                }
            }
        })
    }, [userInfo, getCommonData, getList])

    const checkPermission = () => {
        let moduleId = '210002'
        if (isEdu) {
            moduleId = '211002'
        }
        return new Promise((resolve, reject) => {
            axiosMethod({
                type: 'post',
                url: mainServer + '/UserMgr/PowerMgr/ValidateIdentity',
                body: {
                    IdentityCode: currentIdentity?.identityCode,
                    ModuleID: moduleId,
                    UserID: userInfo.UserID
                },
                header: {
                    Authorization: 'X-Token=' + sessionStorage.getItem('token')
                },
                callback: (result) => {
                    resolve(result)
                }
            })
        })
    }

    useEffect(() => {
        document.title = '消息中心推送设置'
        let favicon = document.getElementById("favicon");
        favicon.href = './favicon2.ico'
        getCommonData()
    }, [])

    useEffect(() => {
        getList('init')
    }, [currentApp, currentType, keyword])

    useEffect(() => {
        getSysSettingCount()
    }, [currentApp])


    if (!access) {
        message.error('当前用户无访问权限')
        return (
            <div css={{
                height: '100vh',
                width: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <LgEmpty className="empty-example-block" icon="accessError" size="large">暂无权限</LgEmpty>
            </div>
        )
    }

    return (
        <div className='app_message_setting'>
            <Header title='消息中心推送设置' isSetting={true} />
            <div className='main_body'>
                <div className='card_container'>
                    {
                        Array.isArray(cardArr) && cardArr.length > 0 && cardArr.map((item, index) => {
                            if (index == 6 && !dingVisible) {
                                return
                            }
                            return (
                                <div title={item.title}>
                                    <LgColorCard customColor={item.color} key={item.name + index}>
                                        <div className='title'>{item.name} </div>
                                        <div className='text'>
                                            <span className='count'>{item.count}</span>
                                            <span style={{ fontSize: '12px' }}>个已启用</span>
                                        </div>
                                        <span className='icon'>
                                            <img alt='' src={fileObj[item.icon]} />
                                        </span>
                                    </LgColorCard>
                                </div>
                            )
                        })
                    }
                </div>
                <Spin tip='数据加载中' spinning={loadVisible}>
                    <div className='setting_container'>
                        <div className='option_area'>
                            <div css={{
                                display: 'flex'
                            }}
                            >
                                <LgSelect
                                    id='allApp'
                                    datalist={appList}
                                    SelectOption={(value) => { setCurrentApp(value) }}
                                    value={currentApp.text}
                                    size={"normal"}
                                ></LgSelect>
                                <LgSelect
                                    datalist={msgType}
                                    SelectOption={(value) => setCurrentType(value)}
                                    value={currentType.lable}
                                    size={"normal"}
                                ></LgSelect>
                            </div>
                            <LgSearch
                                input={{ placeholder: '搜索应用名称/场景/事件', value: keyword }}
                                onSearch={(value) => setKeyword(value)}
                                onClear={() => setKeyword('')}
                                onKeyUp={(e) => { console.log(e) }}
                            />
                        </div>
                        {/* <div className='click_loading' style={{display:loadVisible2?"":'none'}}>
                            <div className='loading_content'>
                                <LgLoadingCircleRotation size="large" />
                            </div>
                        </div> */}
                        <Spin tip='Loading...' wrapperClassName='click_loading' spinning={loadVisible2} >
                            <div className='table_box'>
                                <table style={{ 'width': '100%' }} className='box_header'>
                                    <thead className="lg-table-thead">
                                        <tr>
                                            <th rowspan="2" className="lg-table-cell" style={{ width: '50px' }}></th>
                                            <th rowspan="2" className="lg-table-cell" style={{ width: '170px' }}>应用名称</th>
                                            <th rowspan="2" className="lg-table-cell" style={{ width: '90px' }}>场景</th>
                                            <th rowspan="2" className="lg-table-cell" style={{ width: '180px' }}>事件</th>
                                            <th rowspan="2" className="lg-table-cell" style={{ width: '180px' }}>通知对象</th>
                                            <th colspan="7" className="lg-table-cell" style={{ borderBottom: '1px solid #fff' }}>推送方式</th>
                                        </tr><tr><th className="lg-table-cell" style={{ width: '80px' }}>公众号消息</th>
                                            <th className="lg-table-cell" style={{ width: '80px' }}>系统提醒</th>
                                            <th className="lg-table-cell" style={{ width: '80px' }}>待办事项</th>
                                            <th className="lg-table-cell" style={{ width: '80px' }}>App消息</th>
                                            <th className="lg-table-cell" style={{ width: '80px' }}>邮件</th>
                                            <th className="lg-table-cell" >手机短信</th>
                                            {
                                                dingVisible && <th className="lg-table-cell" >钉钉消息</th>
                                            }
                                        </tr>
                                    </thead>
                                </table>
                                <Scrollbars
                                    className='box_body'
                                    autoHeight
                                    autoHeightMax={'calc(100vh - 335px'}
                                >
                                    {
                                        dataList.length > 0 ?
                                            <LgTable columns={columns} data={dataList} bordered /> :
                                            <div className='empty_container'>
                                                <LgEmpty size="large" />
                                            </div>
                                    }
                                </Scrollbars>
                            </div>
                        </Spin>

                    </div>
                </Spin>
                <BtnAlert
                    visible={alertInfo.visible}
                    title={alertInfo.title}
                    smallTitle={alertInfo.smallTitle}
                    onOk={alertInfo.onOk}
                    onCancel={alertInfo.onCancel} />
            </div>
            <TaskProcess
                title="消息推送设置"
                subtitle="消息推送设置"
                processImg={flowChartImg}
                cardBg={cardBg}
                width={1020}
                description={
                    <>
                        消息推送设置只有管理员才有权限进入，控制各个系统的各类消息是否打开或者关闭推送开关。
                    </>
                }
            />
        </div>
    )
}

const mapProps = (state) => {
    return {
        userInfo: state.userInfo,
        currentIdentity: state.currentIdentity,
        sysInfo: state.sysInfo,
        alertInfo: state.alertInfo,
        mainServer: state.mainServer,
        isEdu: state.isEdu
    }
}

export default connect(mapProps)(Index)

const SelectItem = styled.i`
    font-style:normal;
    font-size:14px;
    color:#999999;
    margin-left:${props => props.marginLeft ? props.marginLeft + 'px' : '2px'};
`